---
id: 6571b2fecc1de61d7b4dd381
title: Вступ до Flexbox. Запитання C
challengeType: 15
dashedName: introduction-flexbox-question-c
---

# --description--

Як не дивно, будь-який елемент може бути і гнучким контейнером, і гнучким предметом. Іншими словами, ви можете додати `display: flex` до гнучкого предмета, а потім використати flexbox, щоб розташувати його дочірні елементи.

<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-03.png" style="width: 95%; height: 95%;" alt="гнучкий контейнер, який містить декілька гнучких предметів, які також містять вкладені гнучкі предмети. З цієї причини батьківський елемент цих вкладених гнучких предметів також є гнучким контейнером." />

Створення та вкладання декількох гнучких контейнерів та предметів — це основний спосіб, яким ви будете створювати складні макети. Зображення нижче було створено виключно за допомогою flexbox, щоб розмістити, змінити розмір та розташувати різні елементи. Flexbox — це дуже потужний інструмент.

<img src="https://cdn.freecodecamp.org/curriculum/odin-project/flex-box/flexbox-02.png" alt="складний макет гнучких предметів та гнучких контейнерів. Існує декілька гнучких контейнерів, вкладених один в одного, що також робить їх гнучкими предметами" />

Зображення представляє макет CSS Flexbox з вкладеними гнучкими контейнерами. Зовнішній контейнер позначений як «ALSO a flex container» та виділений синім кольором, а всередині нього розташований інший контейнер, позначений червоним як «with flex items». Усередині червоного контейнера є три предмети, позначені персиковим кольором як «flex items». Це свідчить про те, що гнучкий контейнер може бути вкладений в інший гнучкий контейнер і містити власні гнучкі елементи, демонструючи рекурсивну природу структур макета Flexbox.

# --question--

## --text--

Яка властивість CSS застосовується до елементів, щоб зробити їх гнучкими контейнерами?

## --answers--

`align-items`

---

`display: flex`

---

`justify-content`

---

`flex`

## --video-solution--

2
